<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Focus a Corporate Category Flat Bootstrap Responsive website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Focus Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">  
<link href="css/font-awesome.css" rel="stylesheet">  <!-- font-awesome icons -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- //Custom Theme files --> 
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>  
<!-- //js -->
<!-- web-fonts -->  
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> 
<link href="//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700" rel="stylesheet">
<!-- //web-fonts -->
</head>
<body>  
	<!-- banner -->
	<div class="banner-w3layouts">  
		<div class="flexslider">
			<ul class="slides">
				<li>
					<div class="banner-img1"> 
					</div>
				</li>
				<li>
					<div class="banner-img2"> 
					</div>
				</li>
			</ul> 
		</div> 
		<!-- FlexSlider -->
		<script defer src="js/jquery.flexslider.js"></script>
		<script type="text/javascript">
			$(window).load(function(){
			  $('.flexslider').flexslider({
				animation: "slide",
				start: function(slider){
				  $('body').removeClass('loading');
				}
			  });
			});
		</script>
		<!-- //FlexSlider -->
		<!-- banner-info -->
		<div class="banner-agileinfo">
			<div class="container">		
				<div class="w3header"> <!--header--> 
					<nav class="navbar navbar-default">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<h1><a  href="index.html">Focus</a></h1>
						</div>
						<!-- navbar-header -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<form class="navbar-right w3ls-search" action="#" method="post">
								<input type="search" name="Search" placeholder="Enter your text..." required="">
								<button type="submit" class="btn btn-default" aria-label="Left Align">
									<span class="glyphicon glyphicon-search"></span>
								</button>
							</form>
							<ul class="nav navbar-nav navbar-right">
								<li><a href="index.html" class="active">Home</a></li>
								<li><a href="about.html">About</a></li> 
								<li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
									<ul class="dropdown-menu">
										<li><a href="icons.html">Web Icons</a></li>
										<li><a href="codes.html">Short Codes</a></li>
									</ul>
								</li> 
								<li><a href="portfolio.html">Portfolio</a></li>
								<li><a href="contact.html">Contact Us</a></li>
							</ul> 
							<div class="clearfix"> </div>	
						</div>
					</nav>
				</div>  
				<!-- //header --> 
				<div class="banner-w3text">
					<h4>Curabitur sagittis ultrices</h4>
					<h2>Quisque nunc quisenim ullam</h2>
					<h5>Donec massa ipsum imperdiet </h5>								
					<a href="single.html" class="w3btn"><span>Read More</span></a>
				</div> 
			</div>
			<!-- //banner-info --> 
		</div>
	</div>
	<!-- //banner -->
	<!-- welcome -->
	<div class="welcome">
		<div class="container">	
			<div class="agileits-title">
				<h3>Welcome To Focus</h3>
				<p>Mauris rutrum turpis eget tincidunt eleifend vestibulum condimentum mollis tellus eu magna laoreet.</p>
			</div>
			<div class="welcome-agileinfo">
				<div class="col-md-4 col-xs-6 welcome-grid agileits-w3layouts">  
					<div class="col-xs-2 welcome-grid-left">
						<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 welcome-grid-right">
						<h4>tiamet pharetra nunc </h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus maiores alias phasellus</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 col-xs-6 welcome-grid agileits-w3layouts">
					<div class="col-xs-2 welcome-grid-left">
						<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 welcome-grid-right">
						<h4>Etiam pharetra</h4>
						<p>Sapiente delectus reiciendis maiores alias phasellus mattis tellus dictum </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 col-xs-6 welcome-grid agileits-w3layouts">
					<div class="col-xs-2 welcome-grid-left">
						<span class="glyphicon glyphicon-check" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 welcome-grid-right">
						<h4>pharetra erat</h4>
						<p>phasellus mattis tellus eget tellus dictum justo scelerisque eget sapiente </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 col-xs-6 welcome-grid welcome-grid-bottom">
					<div class="col-xs-2 welcome-grid-left">
						<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 welcome-grid-right">
						<h4>erat et nunc </h4>
						<p>Maiores alias phasellus mattis tellus eget tellus dictum justo interdum </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 col-xs-6 welcome-grid welcome-grid-bottom">
					<div class="col-xs-2 welcome-grid-left">
						<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 welcome-grid-right">
						<h4>tiamet pharetra nunc </h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus maiores alias phasellus</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-4 col-xs-6 welcome-grid welcome-grid-bottom">
					<div class="col-xs-2 welcome-grid-left">
						<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 welcome-grid-right">
						<h4>Etiam pharetra</h4>
						<p>Sapiente delectus reiciendis maiores alias phasellus mattis tellus dictum </p>
					</div>
					<div class="clearfix"> </div>
				</div> 
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //welcome -->
	<!-- about-slid -->
	<div class="w3about-slid agileits-w3layouts"> 
		<div class="container">
			<div class="about-slid-info"> 
				<h4>Lorem ipsum dolor sit amet consectetur</h4>
				<p>Fusce eu semper lacus, eget placerat mauris. Sed lectus tellus, sodales id elit a, feugiat porttitor nulla. Sed porta magna vitae nisl vulputate lacinia. Morbi malesuada sollicitudin tortor, vitae pharetra nunc lacinia eget.</p>
			</div>
		</div>
	</div>
	<!-- //about-slid -->
	<!-- skills -->
	<div class="skills w3-agileits">
		<div class="container"> 
			<div class="skills-agileinfo">
				<div class="col-md-6 skills-w3left">
					<h4>Our Services</h4>
					<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
						<ul id="myTab" class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Service1</a></li>
							<li role="presentation"><a href="#carl" role="tab" id="carl-tab" data-toggle="tab" aria-controls="carl">Service2</a></li>
							<li role="presentation"><a href="#james" role="tab" id="james-tab" data-toggle="tab" aria-controls="james">Service3</a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
								<div class="tabcontent-grids">
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lorem sed velit fermentum lobortis. Fusce eu semper lacus, eget placerat mauris. Sed lectus tellus, sodales id elit a, feugiat porttitor nulla. Sed porta magna vitae nisl vulputate lacinia. Morbi malesuada sollicitudin tortor, vitae pharetra nunc lacinia eget. Nulla ornare purus nunc, ut dapibus leo sodales adipiscing. </p>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane fade" id="carl" aria-labelledby="carl-tab">
								<div class="tabcontent-grids"> 
									<ul>
										<li><span class="glyphicon glyphicon-menu-right"></span> Sed tincidunt lorem sed </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Excepteur sint occaecat </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Duis aute irure dolor in </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Sed tincidunt lorem sed </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Excepteur sint occaecat </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Duis aute irure dolor in </li>
									</ul>
								</div>
							</div>
							<div role="tabpanel" class="tab-pane fade" id="james" aria-labelledby="james-tab">
								<div class="tabcontent-grids"> 
									<ul>
										<li><span class="glyphicon glyphicon-menu-right"></span> Sed tincidunt lorem sed </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Excepteur sint occaecat </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Duis aute irure dolor in </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Sed tincidunt lorem sed </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Excepteur sint occaecat </li>
										<li><span class="glyphicon glyphicon-menu-right"></span> Duis aute irure dolor in </li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<h4>Our Specialization</h4>
				<div class="col-md-6 skills-w3right bar_group"> 
					<div class='bar_group__bar thin' label='Lorem ipsum &nbsp;&nbsp; 80%' value='200'></div>
					<div class='bar_group__bar thin' label='Quis nostrud &nbsp;&nbsp; 100%' value='250'></div>
					<div class='bar_group__bar thin' label='Sed do eiusmod &nbsp;&nbsp; 72%' value='180'></div>
					<div class='bar_group__bar thin' label='Ut enim adnim &nbsp;&nbsp; 88%' value='220'></div>
				</div>
				<!-- bar-js -->
				<script src="js/bars.js"></script>
				<!-- bar-js -->
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //skills -->
	<!-- news -->
	<div class="news-w3layouts">
		<div class="container">
			<div class="agileits-title">
				<h3>News & Events</h3>
				<p>Mauris rutrum turpis eget tincidunt eleifend vestibulum condimentum mollis tellus eu magna laoreet.</p>
			</div>
			<div class="news-agileinfo w3-agileits">	
				<div class="col-md-4 news-w3lgrids">
					<h4><span>13/16</span>December</h4>
					<p>Cras justo odioda pibus facilisis dignissimos Sed ut perspiciatis unde omnis iste natus error sit voluptatem inventore veritatis</p>
				</div>
				<div class="col-md-4 news-w3lgrids">
					<h4><span>20/16</span>November</h4>
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem inventore veritatis Cras justo odioda pibus facilisis dignissimos </p>
				</div>
				<div class="col-md-4 news-w3lgrids">
					<h4><span>05/16</span>November</h4>
					<p>Facilisis dignissimos Sed ut perspiciatis unde omnis iste natus error sit voluptatem inventore veritatis cras justo odioda pibus </p>
				</div>				
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //news -->
	<!-- subscribe -->
	<div class="subscribe wthree-sub">  
		<div class="container"> 
			<h4>Subscribe to get monthly newsletter</h4>  
			<form action="#" method="post"> 
				<input type="email" name="email" placeholder="Enter your Email..." required="">
				<input type="submit" value="Subscribe">
				<div class="clearfix"> </div>
			</form>  
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lorem sed velit lacus ornare <a href="">Privacy policy</a>.</p>
		</div>
	</div>
	<!-- //subscribe -->
	<!-- footer start here -->
	<div class="agile-footer"> 
		<div class="container">
			<div class="footer-agileinfo">
				<div class="col-md-4 col-sm-6 footer-wthree-grid">
					<h6><a  href="index.html">Focus</a></h6> 
					<p>Aenean vitae metus sit amet purus sodales blandit. Nullam ut dolor eu urna viverra semper. Mauris est odio, laoreet laoreet sapien non bibendum nulla.</p>
				</div>
				<div class="col-md-3 col-sm-6 footer-wthree-grid">
					<h3>Navigation</h3>
					<ul>
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li> 
						<li><a href="portfolio.html">Portfolio</a></li> 
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div> 
				<div class="col-md-2 col-sm-6 footer-wthree-grid">
					<h3>Archives</h3>
					<ul>
						<li><a href="single.html">Nov 2016</a></li>
						<li><a href="single.html">Oct 2016</a></li> 
						<li><a href="single.html">Sept 2016</a></li>
						<li><a href="single.html">Aug 2016</a></li> 
					</ul>
				</div> 
				<div class="col-md-3 col-sm-6 footer-wthree-grid w3social">
					<h3>Social Media</h3>
					<ul>
						<li><a href="#"><i class="fa fa-google-plus"></i> Google-plus</a></li>
						<li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
						<li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
						<li><a href="#"><i class="fa fa-dribbble"></i> Dribbble</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>		
			</div>
		</div>
	</div> 
	<!-- //footer end here -->
	<!-- copy rights start here -->
	<div class="copyw3-agile">
		<div class="container"> 
			<p>© 2017 Focus. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
		</div>
	</div>
	<!-- //copy right end here -->  
	<script src="js/SmoothScroll.min.js"></script> 
	<!-- start-smooth-scrolling -->
	<script type="text/javascript" src="js/move-top.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
	<!-- //smooth-scrolling-of-move-up --> 
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>